<template>
  <view class="entire">
    <view class="top">
      <view class="left">
        <wd-icon name="list" size="30rpx" />
        &ensp;{{ msg.title }}
      </view>
    </view>
    <divider />
    <view class="bottom">
      <view class="left">
        <wd-icon name="time" size="28rpx" />
        &ensp;发件时间：&ensp;{{ msg.createTime }}
      </view>
      <view class="right" @click="navToDetail(msg)">查看详情</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { MyMessageItem } from '@/service/my/my'
import Divider from '@/components/divider/divider.vue'
import { getNewsDetail } from '@/service/news/news'

const props = defineProps<{
  msg: MyMessageItem
}>()

// todo消息 跳转详情页
const navToDetail = (data: MyMessageItem) => {
  // msgType 1课程7新闻
  if (data.msgType === 0) {
    // 消息详情
    uni.showModal({
      title: '消息详情',
      content: `${data.messageContent}`,
      showCancel: false,
    })
  } else if (data.msgType === 1) {
    // 课程
    uni.navigateTo({
      url:
        '/pages/courseCenter/CourseInfo/CourseInfo?data=' +
        encodeURIComponent(JSON.stringify({ resId: data.recResoureId })),
    })
  } else if (data.msgType === 2) {
    // 考试
    uni.navigateTo({
      url: '/pages-sub/exam/exam',
    })
  } else if (data.msgType === 3) {
    // 课程计划列表
  } else if (data.msgType === 4) {
    // 新人欢迎页面
    uni.navigateTo({
      url: '/pages-sub/myCertificate/fundCertificated',
    })
  } else if (data.msgType === 5) {
    // 培训详情
  } else if (data.msgType === 6) {
    // 知识
    uni.navigateTo({
      url:
        '/pages-sub/knowledgeRichText/knowledgeRichText?data=' +
        encodeURIComponent(JSON.stringify({ id: data.recResoureId })),
    })
  } else if (data.msgType === 7) {
    // 新闻
    getNewsDetail(data.recResoureId).then((res) => {
      uni.navigateTo({
        url: '/pages-sub/myNews/newsRichText?data=' + encodeURIComponent(JSON.stringify(res.data)),
      })
    })
  } else {
    uni.showToast({
      title: `未知类型${data.msgType}`,
      icon: 'none',
    })
  }
}
</script>

<style scoped lang="scss">
.entire {
  width: 700rpx;
  height: 150rpx;
  background-color: white;
  border-radius: 15rpx;
  margin-left: 25rpx;
  margin-top: 30rpx;
  display: flex;
  flex-direction: column;
  .top {
    width: 700rpx;
    height: 80rpx;
    display: flex;
    justify-content: space-between;
    .left {
      margin-left: 20rpx;
      margin-top: 20rpx;
      width: 600rpx;
      height: 60rpx;
      font-size: 25rpx;
      font-weight: bold;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .bottom {
    width: 700rpx;
    height: 70rpx;
    display: flex;
    .left {
      margin-left: 16rpx;
      width: 400rpx;
      height: 50rpx;
      display: flex;
      font-size: 23rpx;
      color: #254872;
    }
    .right {
      margin-left: 100rpx;
      width: 120rpx;
      height: 40rpx;
      border-radius: 18rpx;
      background-color: #254872;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 22rpx;
      color: #ffffff;
      cursor: pointer;
    }
  }
}
</style>
